<template>
  <div>
    <!-- 头像资料区域 -->
    <div class="profile-box">
      <van-image :src="userInfo.photo" fit="cover" round />
      <div class="info-box">
        <h2>{{ userInfo.name }}</h2>
        <span>{{ userInfo.birthday }}</span>
      </div>
    </div>
    <!-- 快捷访问 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item style="color:#3296fa" icon="newspaper-o" text="我的作品" />
      <van-grid-item style="color:#f00" icon="star-o" text="我的收藏" />
      <van-grid-item style="color:orange" icon="tosend" text="阅读历史" />
    </van-grid>

    <!-- 功能cell -->
    <van-cell-group>
      <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link/>
      <van-cell title="小智同学" icon="chat-o" is-link/>
      <van-cell title="系统设置" icon="setting-o" is-link/>
      <van-cell @click="logout" title="退出登录" icon="info-o" is-link/>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyMine',
  computed: {
    ...mapState('user', ['userInfo'])
  },
  async created () {
    this.$store.dispatch('user/reqUserInfo')
  },
  methods: {
    logout () {
      // 弹出确认框
      this.$dialog.confirm({
        message: '确认是否退出？'
      })
        .then(() => {
          // 清空token
          this.$store.commit('user/setToken', {})
          // 打回登录页
          this.$router.push('/login')
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style lang="less" scoped>
.profile-box {
  @color: #3296fa;
  background-color: @color;
  height: 140px;
  display: flex;
  align-items: center;
  /* vant里的组件标签名叫什么，它就必然有个类也叫什么 */
  .van-image {
    width: 100px;
    height: 100px;
    margin: 0 20px;
  }
  .info-box {
    h2 {
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    span {
      background-color: #fff;
      color: @color;
      padding: 5px 2px;
    }
  }
}
</style>
